<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>

<body>
    <div id="app">
        <!-- v-if 是直接对DOM树进行修改，如果是会频繁切换显示和隐藏的元素，建议使用v-show而不是v-if -->
        <!--v-if v-else-if v-else 就如同使用if，else if，else 一样-->
        <h1 v-if="show">条件渲染</h1>
        <button @click="modifyShow">{{show?'隐藏':'显示'}}</button>
        <p>点击量: {{cnt}}</p>
        <button @click="plusCnt">点击</button>
        <p v-if="cnt<3">点击量小于3</p>
        <p v-else-if="cnt<6">点击量大于等于3小于6</p>
        <p v-else>点击量大于等于6</p>
    </div>
    <script type="module">
        import { createApp, ref } from "../00-dependency/vue.esm-browser.js"
        createApp({
            setup() {
                const cnt = ref(0)
                const plusCnt = () => {
                    cnt.value += 1
                }
                const modifyShow = () => {
                    console.log(show.value)
                    show.value = !show.value
                }
                const show = ref(true)
                return {
                    show,
                    cnt,
                    modifyShow,
                    plusCnt,
                }
            }
        }).mount("#app")
    </script>
</body>

</html>